<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body > div > div {
        background-color: aqua;
    }
</style>
<script>
    // 要求用户名必须是2 - 20个字母
    function checkName() {
        var rexpName = /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/;
        if (rexpName.test($("userName").value)) {
            $("nameSpan").innerHTML = "验证通过";
            $("nameSpan").style.color = "green";
            return true;
        } else {
            $("nameSpan").innerHTML = "姓名必须是两个以上的字母或汉字";
            $("nameSpan").style.color = "red";
            return false;
        }
    }


    // 密码必须是6位数字
    function checkPwd() {
        var rexpPwd = /^\d{6}$/;
        if (rexpPwd.test($("passWord").value)) {
            $("pwdSpan").innerHTML = "验证通过";
            $("pwdSpan").style.color = "green";
            return true;
        } else {
            $("pwdSpan").innerHTML = "密码必须是六位数字";
            $("pwdSpan").style.color = "red";
            return false;
        }
    }


    // 生日为XXXX - XX - XX
    function checkBirth() {
        var rexpBirth = /^[0-9]{4}[-][0-9]{2}[-][0-9]{2}$/;
        // alert($3("birthDay").value);
        if (rexpBirth.test($("birthDay").value)) {
            $("birSpan").innerHTML = "验证通过";
            $("birSpan").style.color = "green";
            return true;
        } else {
            $("birSpan").innerHTML = "生日不能为空";
            $("birSpan").style.color = "red";
            return false;
        }
    }


    // 电话号码必须是13、15、18开始的11位数字
    function checkPhone() {
        var rexpPhone = /^1[358][0-9]{9}$/;
        if (rexpPhone.test($("phone").value)) {
            $("phoSpan").innerHTML = "验证通过";
            $("phoSpan").style.color = "green";
            return true;
        } else {
            $("phoSpan").innerHTML = "电话号码有误";
            $("phoSpan").style.color = "red";
            return false;
        }
    }


    // 电子邮件必须是XX@XX.com格式
    function checkMail() {
        var rexpMail = /^\w{2}@\w{2}.com$/;
        if (rexpMail.test($("mail").value)) {
            $("mailSpan").innerHTML = "验证通过";
            $("mailSpan").style.color = "green";
            return true;
        } else {
            $("mailSpan").innerHTML = "邮箱格式有误";
            $("mailSpan").style.color = "red";
            return false;
        }
    }

    //提交
    function right() {
        if (checkPwd() && checkPhone() && checkMail() && checkBirth() && checkName()) {
            alert("提交成功")
        } else {
            alert("提交失败")
        }
    }

    //获取id
    function $(id) {
        return document.getElementById(id);
    }


</script>
<body>
<div>
    <div>
        用户名
        <input type="text" name="userName" id="userName">
        <span id="nameSpan"><br>
</span>
    </div>
    <div>
        密码
        <input type="text" name="passWord" id="passWord">
        <span id="pwdSpan"><br>
</span>
    </div>
    <div>
        生日
        <input type="date" name="birthDay" id="birthDay">
        <span id="birSpan"><br>
</span>
    </div>
    <div>
        电话号码
        <input type="text" name="phone" id="phone">
        <span id="phoSpan"><br>
</span>
    </div>
    <div>
        邮箱
        <input type="text" name="mail" id="mail">
        <span id="mailSpan"><br>
</span>
    </div>
    <input type="button" name="ok" id="ok" value="确定"
           onclick="checkBirth(),checkMail(),checkName(),checkPhone(),checkPwd(),right()">
</div>
</body>
</html>